<template>
  <div class="item-info mend-info">
    <div class="sub-btn">
      <div class="add-btn" v-if="$route.name=='mendpage'">
        <el-button @click="newmend">清空</el-button>
        <el-button @click="submitmendinfo" v-if="showxj">新建</el-button>
      </div>
    </div>
    <section v-if="$route.name=='mendpage'">
      <div class="left-info">
        <div class="item2">
          <span style="color:#69f;line-height:40px">选择房屋</span>
          <el-select v-model="mendlist.detailid" multiple style="width:300px;line-height:30px"
            :disabled="handletype=='4'||handletype=='3'"
            :placeholder="(handletype=='4'||handletype=='3')?'':'请选择'"
            v-if="showxj"
          >
            <el-option
              v-for="(item,index) in fwSelect"
              :key="index"
              :label="item.hash.detailnum"
              :value="item.hash.detailid"
            >
            </el-option>
          </el-select>
          <span v-else>
            {{mendlist.detailidname}}
          </span>
        </div>
        <div class="item icon" style="margin-top:10px">
          <span>故障时间</span>
          <el-date-picker
            v-model="mendlist.happentime"
            type="date"
            :disabled="handletype=='4'||handletype=='3'"
            :placeholder="(handletype=='4'||handletype=='3')?'':'请选择'"
            valueFormat="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日"
          >
          </el-date-picker>
        </div>
        <div class="item textarea">
          <span>故障描述</span>
          <textarea type="text" v-model="mendlist.repairdesc"></textarea>
          <div class="upload-btn" style="width:90px;color:#333;text-align:left">
            <test tn="image" localfiletype="02" :imagefile.sync="this.mendlist" :isupload="handletype">上传图片</test>
          </div>

        </div>
        <div class="item">
          <span>维修单位</span>
          <input type="text" v-model="mendlist.repairorg">
        </div>
        <div class="item">
          <span>维修费用（元）</span>

          <input type="text" v-model="mendlist.repairfee" oninput="value=value.toString().match(/^\d*(\.?\d{0,2})/g)">
        </div>
        <div class="item icon">
          <span>维修完成时间</span>
          <el-date-picker
            v-model="mendlist.finishtime"
            type="date"
            :disabled="handletype=='4'||handletype=='3'"
            :placeholder="(handletype=='4'||handletype=='3')?'':'请选择'"
            format="yyyy 年 MM 月 dd 日"
            valueFormat="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
      </div>
    </section>

    <div class="info-list">
      <div class="title">维修历史记录</div>

      <el-button
        type="primary"
        @click="dowxsh"
        style="float:right;margin-bottom:10px"
        v-if="$route.name=='checkmend'"
      >审核</el-button>
      <el-table
        ref="multipleTable"
        :data="detailData2"
        border
        style="width:100%;margin:20px auto"
        @selection-change="handleSelectionChange2"
      >
        <el-table-column type="selection" width="55" :selectable="checkboxInit2" v-if="$route.path=='/checkmend'"></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="hash.detailnum" label="房屋编号"></el-table-column>
        <el-table-column prop="hash.happentime" label="故障时间"></el-table-column>
        <el-table-column prop="hash.repairdesc" label="故障描述"></el-table-column>
        <el-table-column prop="hash.repairorg" label="维修单位"></el-table-column>
        <el-table-column prop="hash.repairfee" label="维修费用(元)"></el-table-column>
        <el-table-column prop="hash.finishtime" label="维修完成时间"></el-table-column>

        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.hash.status=='0'" style="color:#f60">待审核</span>
            <span v-else-if="scope.row.hash.status=='1'">审核通过</span>
            <span v-else-if="scope.row.hash.status=='2'" style="color:#f60">审核不通过</span>
            <span v-else>已归档</span>
          </template>
        </el-table-column>
        <el-table-column prop="hash.checknotice" label="审核说明"></el-table-column>
        <el-table-column prop="hash.op" label="创建人"></el-table-column>
        <el-table-column prop="hash.checker" label="审核人"></el-table-column>
        <el-table-column label="操作" width="100" v-if="$route.name=='mendpage'">
          <template slot-scope="scope">
            <span
              style="color:blue;cursor:pointer"
              @click="ischeckMendnfo(scope.row.hash.repairid)"
            >查看</span>
            <span
              style="color:blue;cursor:pointer;margin-left:20px"
              @click="removeMend(scope.row.hash.repairid,scope.row.hash.status)"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="维修审核" :visible.sync="wxsh" width="50%">
      <el-form labelWidth="140px">
        <el-form-item label="已选维修：" class="is-required">
          <span v-for="(item, index) in choosewx" :key="index">
            房屋编号：{{item.hash.detailnum}}；故障时间：{{item.hash.happentime}}
          </span>
        </el-form-item>
        <el-form-item label="审核状态：" class="is-required">
          <el-radio v-model="wxstatus" label="1">通过</el-radio>
          <el-radio v-model="wxstatus" label="2">不通过</el-radio>
        </el-form-item>

        <el-form-item label="备注：" :class="wxstatus==2?'is-required':''">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="wxtip"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="wxsh = false">取 消</el-button>
        <el-button type="primary" @click="submitwxsh">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import test from '~/components/common/upload/test.vue';

export default {
  data() {
    return {
      wxstatus: '',
      wxtip: '',
      showxj: true,
      isshowcheck: false,
      ts: this.newStore(),
      isshow: false,
      wxsh: false,
      choosewx: [],
      mendlist: {
        detailid: [],
      },
      image: '',
      detailData2: [],
      fwSelect: [],
      isupload: '',
    };
  },
  props: {
    handletype: {
       	  	type: String,
       	  	twoWay: true,
    },
    // 点击节点回调
    func: {
      type: Function,
      default: null,
    },

  },
  created() {
    // this.getMendlist();
    this.getfwSelect();
    this.getbaseinfo();
  },
  components: {
    test,
  },
  methods: {
    removeMend(id, status) {
      const res = {
        handle: '76ABA4BE996F68CEB3F2193D08E31332F7CD742D20FC44EF',
        token: localStorage.getItem('token'),
        repairid: id,
      };
      if (status == '1') {
        this.$message('审核通过的维修信息不可删除！');
      } else {
        this.$confirm('确认删除此条维修记录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.getbaseinfo();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      }
    },
    checkboxInit2(row) {
      console.log(row);
      if (row.hash.status == '0') {
        return 1;
      }
      return 0;
    },
    submitwxsh() {
      if (this.wxstatus == '2' && this.wxtip == '') {
        this.$message({
          type: 'error',
          message: '请填写审核备注',
        });
        return;
      }
      const wxarr = [];
      for (let i = 0; i < this.choosewx.length; i += 1) {
        wxarr.push(this.choosewx[i].hash.repairid);
      }
      const req = {
        handle:
          '76ABA4BE996F68CE417AAAFED0C1AC07775948D01DF971F7883BEA1E0B5ED827',
        token: localStorage.getItem('token'),
        repairid: wxarr,
        checknotice: this.wxtip,
      };
      const req2 = {
        handle:
          '76ABA4BE996F68CE417AAAFED0C1AC07775948D01DF971F7B2A8B0E3ED992469',
        token: localStorage.getItem('token'),
        repairid: wxarr,
        checknotice: this.wxtip,
      };
      if (this.wxstatus == '1') {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message({
            type: 'success',
            message: '审核提交成功',
          });
          this.wxsh = false;
          this.getbaseinfo();
        });
      } else {
        this.spost(this.ts, '/mainservlet', req2).then((ts) => {
          this.$message({
            type: 'success',
            message: '审核提交成功',
          });
          this.wxsh = false;
          this.getbaseinfo();
        });
      }
    },
    handleSelectionChange2(val) {
      this.choosewx = val;
      console.log(this.choosewx);
    },
    dowxsh() {
      if (this.choosewx.length < 1) {
        this.$message({
          type: 'error',
          message: '请先在表格中勾选维修',
        });
        return;
      }
      this.wxsh = true;
    },
    // getMendlist() {
    //   const res = {
    //     handle: '76ABA4BE996F68CE15C917E318C173B2E734D388EBBFD802BFF0B9210751F692',
    //     token: localStorage.getItem('token'),
    //     repairid: this.$route.query.repairid,
    //   };
    //   this.spost(this.ts, '/mainservlet', res).then((ts) => {
    //     // console.log(ts.d.data.operation1[0].hash);
    //     this.mendlist = ts.d.data.operation1[0].hash;
    //     this.image = this.mendlist.image;
    //   });
    // },
    getbaseinfo() {
      let req;
      if (this.handletype == '3') {
        req = {
          handle:
            '76ABA4BE996F68CED6E79E6CF72B4AD04920EC37433E0E2F91BE9BB85CED52D6',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      } else if (this.handletype == '4') {
        req = {
          handle:
            '76ABA4BE996F68CE15C917E318C173B269F098E9778AE023CB7683D9B20500C7',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      } else {
        req = {
          handle: '76ABA4BE996F68CE15C917E318C173B275852EAA595983BF',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      }
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // this.detailData = ts.d.data.operation1[0].hash;
        if (this.handletype == '3') {
          this.detailData2 = ts.d.data.operation4;
        } else {
          this.detailData2 = ts.d.data.operation3;
        }
        // this.detailData2 = ts.d.data.operation3;
        // console.log(this.detailData2);

        // this.detailData3 = ts.d.data.operation2;
      });
    },
    newmend() {
      this.isshowcheck = false;
      this.showxj = true;
      this.mendlist = {
        detailid: [],
      };
    },
    ischeckMendnfo(id) {
      this.isshowcheck = true;
      this.showxj = false;
      const req = {
        handle: '76ABA4BE996F68CE15C917E318C173B2E734D388EBBFD802BFF0B9210751F692',
        token: localStorage.getItem('token'),
        repairid: id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.mendlist = ts.d.data.operation1[0].hash;
        this.mendlist2 = ts.d.data.operation2;
        this.mendlist.detailid = [];
        this.mendlist.detailidname = this.mendlist.detailnum;
        for (let i = 0; i < this.mendlist2.length; i += 1) {
          this.mendlist.detailid.push(this.mendlist2[i].hash.detailid);
        }

        this.mendlist.ischeckmend = false;
      });
    },
    getSelectList(codetype, td, supid) {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d.data.operation1);
        this[td] = ts.d.data.operation1;
      });
    },
    getTestinput(imgPath, tn) {
      this[tn] = imgPath;
    },
    getfwSelect() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD89D98CC08EF55FA11FF5DF33454F530FAADF37F8C0D2AD7E',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
        onlynormal: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.fwSelect = ts.d.data.operation1;
      });
    },
    submitmendinfo() {
      if (this.mendlist.detailid == []) {
        this.$message('房屋不能为空');
        return;
      }
      if (!this.mendlist.happentime || this.mendlist.happentime.length < 1) {
        this.$message('故障时间不能为空');
        return;
      }
      if (!this.mendlist.repairdesc || this.mendlist.repairdesc.length < 1) {
        this.$message('故障描述不能为空');
        return;
      }
      if (!this.mendlist.repairorg || this.mendlist.repairorg.length < 1) {
        this.$message('维修单位不能为空');
        return;
      }
      if (!this.mendlist.repairfee || this.mendlist.repairfee.length < 1) {
        this.$message('维修费用不能为空');
        return;
      }
      if (!this.mendlist.finishtime || this.mendlist.finishtime.length < 1) {
        this.$message('维修完成时间不能为空');
        return;
      }

      this.$confirm('确认新增？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '76ABA4BE996F68CE5F203644521BEE2AD186AE9521A76CEA',
          token: localStorage.getItem('token'),
          hid: this.$route.query.hid,
          detailid: this.mendlist.detailid,
          happentime: this.mendlist.happentime,
          haddr: this.mendlist.haddr,
          image: this.mendlist.image,
          repairdesc: this.mendlist.repairdesc,
          repairorg: this.mendlist.repairorg,
          repairfee: this.mendlist.repairfee,
          feeunit: '元',
          finishtime: this.mendlist.finishtime,
        };
        this.spost(this.ts, '/mainservlet', res).then((ts) => {
          this.$message({
            type: 'success',
            message: '新增成功!',
          });
          this.newmend();
          this.getbaseinfo();
        });
      });
    },
  },
};
</script>


<style scoped lang="stylus" rel="stylesheet/stylus">
  .xiugai
    background:#ffff0070
  .avatar ul li{
  float left
  width 33%
}
  .info-wrapper .info-content .upload-btn[data-v-6b40dfc5]
    background #fff
    width 90px

  .item-info>>>.el-date-editor .el-range-separator
    padding: 0
    line-height: 22px
  .item-info >>>.el-date-editor.el-input, .el-date-editor.el-input__inner
    width: 300px
    height: 30px
  .item-info >>>.el-input__inner
    height: 30px
    border-top: 2px solid #999
    border-radius: 0
  .item-info >>>.el-input__icon
    line-height: 22px
    color: #333
  .avatar >>>.el-upload--picture-card
    width: 90px
    height: 90px
    line-height: 100px
    margin-top: 20px
  .avatar >>>.el-upload-list--picture-card .el-upload-list__item
    width: 90px
    height: 90px
    margin-top: 20px
  .upload-btn >>>.el-upload-list__item
    width 160%
  .sub-btn >>> .el-button--success
    background: #69f
    border-color: #69f
  .sub-btn >>> .el-button
    padding: 8px 20px
  .info-wrapper
    position: absolute
    left: 0
    top: 0
    width: 100%
    .info-w
      height: 50px
      line-height: 50px
      width: 100%
      background: #69f
      color: #fff
      cursor: pointer
      .info-c
        width: 1200px
        margin: 0 auto
        .close
          display: inline-block
          margin-right: 20px
          .iconfont
            font-size: 20px
        .title
          display: inline-block
          font-size: 18px
    .info-content
      width: 1200px
      min-height: 600px
      margin: 0 auto 50px
      .upload-btn
        display: inline-block
        vertical-align: top
        margin-left: 5px
        width: 80px
        height: 30px
        line-height: 30px
        text-align: center
        border-radius: 5px
        color: #fff
      .info-tab
        cursor: pointer
        border-bottom: 1px solid #ccc;
        .tab-item
          display: inline-block
          width: 120px
          height: 40px
          line-height: 40px
          text-align: center
          border: 1px solid #ccc
          margin: 15px 0 15px -1px
          background: #fff
          &.active
            background: #69f
            color: #fff
      .item-info
        position: relative
        .sub-btn
          position: absolute
          right: 190px
          top: -60px
          height: 40px
          line-height: 40px
          .save-btn, .add-btn
            display: inline-block
            margin-right: 15px
        .info-list
          margin-top: 50px
          text-align: center
          .title
            padding: 30px 0
            font-weight: 600
            font-size: 18px
            color: #6699ff
          table
            text-align: center
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            td, th
              border: 1px solid #ccc
              font-size: 14px
              color: #666
              height: 40px
            thead
              th
                font-weight: 600
                background-color: #F2F2F2
                &:nth-of-type(1)
                  width: 40px
                &:nth-of-type(2)
                  width: 120px
        .left-info, .right-info
          display: inline-block
          vertical-align: top
          width: 600px
          .item
            margin-top: 5px
            height: 30px
            line-height: 30px
            &:nth-of-type(1)
              margin-top: 15px
            &.icon
              position: relative
              .iconfont
                position: absolute
                top: 0
                right: 190px
            span
              display: inline-block
              vertical-align: top
              width: 120px
              color: #333333
              font-weight: 600
            input
              display: inline-block
              vertical-align: top
              width: 300px
              height: 30px
              border: 1px solid #ccc
              border-top: 2px solid #999
            select
              display: inline-block
              width: 300px
              height: 30px
              border: 1px solid #ccc
              border-top: 2px solid #999
              text-align: right
              &.min1
                width: 100px
              &.min2
                width: 200px
                margin-left: -1px
            &.textarea
              height: 150px
              textarea
                width: 300px
                height: 150px
                border: 1px solid #ccc
                border-top: 2px solid #999
            &.spec
              height: 70px
              span
                float: left
              .text
                display: inline-block
                input:nth-of-type(1)
                  width: 100px
                input:nth-of-type(2)
                  width: 200px
                &:nth-of-type(2)
                  margin-top: 5px
            &.spec2
              height: 30px
              .text
                display: inline-block
                input
                  display: inline-block
                  vertical-align: top
                input:nth-of-type(1)
                  width: 200px
                input:nth-of-type(2)
                  width: 100px
                select
                  display: inline-block
                  vertical-align: top
                  width: 100px
            &.spec3
              height: 70px
              span
                height: 70px
                float: left
              .text
                display: inline-block
                margin-top: 5px
                input:nth-of-type(1)
                  width: 200px
                input:nth-of-type(2)
                  width: 100px
            &.spec4
              height: 70px
              span
                float: left
                height: 70px
              input
                margin-top: 5px
            &.spec5
              .line
                display: inline-block
                vertical-align: middle
                width: 20px
                height: 1px
                background: #ccc
              .iconfont
                &:ntn-of-type(1)
                  right: 190px
                &:nth-of-type(2)
                  right: 350px
          .item2
            margin-top: 5px
            line-height: 30px
            &:nth-of-type(1)
              margin-top: 15px
            &.icon
              position: relative
              .iconfont
                position: absolute
                top: 0
                right: 190px
            span
              display: inline-block
              vertical-align: top
              width: 120px
              color: #333333
              font-weight: 600
            input
              display: inline-block
              vertical-align: top
              width: 300px
              height: 30px
              border: 1px solid #ccc
              border-top: 2px solid #999
            select
              display: inline-block
              width: 300px
              height: 30px
              border: 1px solid #ccc
              border-top: 2px solid #999
              text-align: right
              &.min1
                width: 100px
              &.min2
                width: 200px
                margin-left: -1px
            &.textarea
              height: 150px
              textarea
                width: 300px
                height: 150px
                border: 1px solid #ccc
                border-top: 2px solid #999
            &.spec
              height: 70px
              span
                float: left
              .text
                display: inline-block
                input:nth-of-type(1)
                  width: 100px
                input:nth-of-type(2)
                  width: 200px
                &:nth-of-type(2)
                  margin-top: 5px
            &.spec2
              height: 30px
              .text
                display: inline-block
                input
                  display: inline-block
                  vertical-align: top
                input:nth-of-type(1)
                  width: 200px
                input:nth-of-type(2)
                  width: 100px
                select
                  display: inline-block
                  vertical-align: top
                  width: 100px
            &.spec3
              height: 70px
              span
                height: 70px
                float: left
              .text
                display: inline-block
                margin-top: 5px
                input:nth-of-type(1)
                  width: 200px
                input:nth-of-type(2)
                  width: 100px
            &.spec4
              height: 70px
              span
                float: left
                height: 70px
              input
                margin-top: 5px
            &.spec5
              .line
                display: inline-block
                vertical-align: middle
                width: 20px
                height: 1px
                background: #ccc
              .iconfont
                &:ntn-of-type(1)
                  right: 190px
                &:nth-of-type(2)
                  right: 350px
          .upload
            width: 400px
            margin-top: 15px
            text-align: center
            .avatar
              width: 400px
              height: 200px
              border: 1px solid #ccc
              margin-bottom: 15px
            .desc
              margin-bottom: 15px
            .btn
              display: inline-block
              margin-bottom: 15px
              width: 80px
              height: 30px
              line-height: 30px
              text-align: center
              border-radius: 5px
              background: #69f
              color: #fff
        &.base-info
          .right-info
            .item
              margin-top: 6px
        &.rent-info
          .right-info
            .item
              margin-top: 11px
              &:nth-of-type(1)
                margin-top: 15px
        span
          display: inline-block
          vertical-align: top
</style>
